<template>
  <view class="businessSchoolPage">
    <view class="topBox con">
      <view class="navbarBox">
        <u-input placeholder="搜索内容"> </u-input>
        <image @click="goPage('/pages/message/message')" src="../../static/home/msg.png" class="icon" mode="aspectFill" />
      </view>
      <view class="swiperBox">
        <!-- <image src="../static/tabbar/shop_active.png" mode="aspectFill" /> -->
      </view>
    </view>
    <view class="tabsBox">
      <view class="itemBox" v-for="(item, index) in list1">
        <view class="default">{{ item.name }}</view>
        <!-- <view class="default">{{ item.name }}</view> -->
      </view></view
    >
    <view class="listBox">
      <view class="box" v-for="(item, index) in 4" @click="goPage('/pages/BusinessSchool/BSDetails')">
        <view class="imgBox"></view>
        <view class="title"> <text class="goodText">旗舰好货</text>小米·口袋照片打印机 家用便携手机蓝牙 </view>
        <view class="desc"> 专业学习 </view>
        <view class="button"> 私信联系 </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goPage } from "@/utils/commonFn";
import { reactive } from "vue";

// 创建响应式数据
const list1 = reactive([{ name: "热门" }, { name: "上榜商品" }, { name: "塑形" }, { name: "补水保湿" }, { name: "祛斑祛痘" }]);
</script>
<style lang="less" scoped>
.businessSchoolPage {
  width: 100%;
  background-color: #f3f4f6;
  .topBox {
    height: 560rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
    .swiperBox {
      padding: 32rpx;
      height: 322rpx;
      border: 4rpx solid #95c2ff;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
    }
  }

  .listBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #fff;
    padding: 0px 32rpx;
    .box {
      width: 48%;
      background-color: #fff;
      margin-bottom: 22rpx;
      padding-top: 20rpx;
      .imgBox {
        width: 336rpx;
        height: 252rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background: salmon;
      }
      .title {
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 38rpx;
      }

      .desc {
        font-weight: 400;
        font-size: 22rpx;
        color: #b7793e;
        line-height: 36rpx;
      }
      .button {
        padding: 8rpx 0rpx;
        width: 280rpx;
        text-align: center;
        color: #fff;
        background: #81d8d0;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        margin-top: 15rpx;
      }
    }
    .goodsBox:nth-child(3n) {
      //如果你的 v-for 循环实际渲染的元素数不是 3 的倍数，确保修改 nth-child 的值以适应你的布局。
      margin-right: auto;
    }
  }
}
</style>
